<template>
	<view class="load-main">
		<!-- 加载顶部导航搜索栏 3、使用组件 -->
		<NavbarLogin></NavbarLogin>
		<view class="load-box">
			<view class="load-text">

			</view>

			<view class="load-choose">
				<view class="load-choosein">
					<view @tap='mmclick()'>密码登录</view>
					<view @tap='yzmclick()'>验证码登录</view>
				</view>
			</view>

			<view class="load-mmclass" v-if="loadtype==='mm'">
				<view class="load-input">
					<input type="text" placeholder-class="load-place" placeholder="请输入邮箱" v-model="emailone" />
				</view>
				<view class="load-input">
					<input type="text" password="true" placeholder-class="load-place" placeholder="请输入密码"
						v-model="password" />
				</view>
				<!-- 				<view class="load-input">
					<input type="text" class="vcodeinput" maxlength="4" placeholder="请输入验证码"
						placeholder-class="load-place" v-model="vcode" />
					<image class="vcodeimg" v-bind:src="vcodesrc" @tap="getvcode()"></image>
				</view> -->
			</view>

			<view class="load-yzmclass" v-if="loadtype==='yzm'">
				<view class="load-input">
					<input type="text" placeholder-class="load-place" placeholder="请输入邮箱" v-model="emailtwo" />
				</view>
				<view class="load-input">
					<input type="text" class="yzm-btn-input" maxlength="6" placeholder-class="load-place"
						placeholder="请输入验证码" v-model="emailcode" />
					<button type="default" class="yzm-btn" v-bind:disabled="btndisabled"
						@tap="getemailcode()">{{btnstr}}</button>
				</view>
			</view>

			<view class="load-button">
				<button class="load-button-style" type="primary" @tap="checklogin()">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	//加载顶部导航搜索栏 1、引用组件
	import NavbarLogin from "../../uni_modules/navbar/navbar_login.vue"

	export default {
		data() {
			return {
				emailone: '',
				password: '',
				//vcode: '',
				//vcodesrc: '',
				loadtype: 'mm',
				emailtwo: '',
				emailcode: '',
				btnstr: '获取验证码',
				btndisabled: false,
			}
		},
		onLoad() {
			
		},
		methods: {
			//上方选择第一个登录
			mmclick() {
				this.loadtype = 'mm'
			},
			//上方选择第二个登录
			yzmclick() {
				this.loadtype = 'yzm'
			},
			//实现登录事件
			checklogin() {
				//选择的是第一个登陆
				if (this.loadtype == 'mm') {
					uni.request({
						url: 'http://localhost:8081/api/user/login',
						method: 'POST',
						data: {
							email: this.emailone,
							password: this.password,
							// vcode: this.vcode,
							// emailtwo:this.emailtwo,
							// emailcode:this.emailcode,
							// loadtype:this.loadtype,
						},
						success: (res) => {
							// if (res.data.status == 'vcodeerror') {
							// 	uni.showToast({
							// 		title: '验证码错误',
							// 		icon: 'none'
							// 	})
							// 	return
							// }
							
							//登录成功
							if (res.data.success == true) {
								uni.showToast({
									title: '登录成功', //显示的文字
									icon: 'success' //显示的图标
								});

								//加空是要保证返回的是字符格式
								uni.setStorageSync('emailone', res.data.email + '');
								uni.setStorageSync('password', res.data.password + '');

								let userInfo = {
									token: res.data.data.LoginRes,
									//username:
								}
								
								//使用uni.setStorage(异步)将token储存在本地
								uni.setStorage({
									key:'token',
									data: userInfo,
									success: function() {
										//控制台输出一下保存的token
										uni.getStorage({
											key:'token',
											success: function(res) {
												console.log(res.data);
											}
										})
									}
								})
								
								//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
								uni.switchTab({
									url: '../tabbor/index/index'
								});
							} else {
								uni.showToast({
									title: '用户名或密码错误', //显示的文字
									icon: 'none' //显示的图标
								});
							}
						}
					})
					//选择的是第二个登陆
				} else {
					uni.request({
						url: 'http://localhost:8081/api/user/login',
						data: {
							email: this.emailtwo,
							code: this.emailcode,
						},
						success: (res) => {
							if (res.data.status == 'vcodeerror') {
								uni.showToast({
									title: '验证码错误',
									icon: 'none'
								})
								return
							}
							//登录成功
							if (res.data.success == true) {
								uni.showToast({
									title: '登录成功', //显示的文字
									icon: 'success' //显示的图标
								});

								uni.setStorageSync('emailtwo', res.data.email + '');
								uni.setStorageSync('password', res.data.password + '');
								
								let userInfo = {
									token: res.data.LoginRes
								}
								
								//使用uni.setStorage将token储存在本地
								uni.setStorage({
									key:'token',
									data: userInfo,
									success: function() {
										uni.getStorage({
											key:'token',
											success: function(res) {
												console.log(res.data);
											}
										})
									}
								})
								
								//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
								uni.switchTab({
									url: '../tabbor/index/index'
								});
							} else {
								uni.showToast({
									title: '用户名或密码错误', //显示的文字
									icon: 'none' //显示的图标
								});
							}
						},
					});
				}
			},
			//倒计时
			timewait(t) {
				//保留原本的 this
				const _this = this;
				setTimeout(function() {
					if (t >= 0) {
						_this.btnstr = t + '秒后点击';
						t--;
						//递归调用的函数
						_this.timewait(t);
					} else {
						_this.btnstr = '获取验证码';
						t = 60;
						_this.btndisabled = false;
					}
				}, 1000)
			},
			//第一个的验证码获取
			// getvcode() {
			// 	this.vcodesrc = '/' + Match.random()
			// },
			//第二个的验证码获取
			getemailcode() {
				uni.request({
					url: 'http://localhost:8081/api/mail/sendRegisterCode/' + this.emailtwo,
				});
				this.btndisabled = true;
				this.timewait(60);
			}
		},
		mounted() {

		},
		//加载顶部导航栏 2、组件注入的形式NavbarSpot
		components: {
			NavbarLogin,
		}
	}
</script>

<style lang="scss">
	.load-main {
		display: flex;
		justify-content: center; //主轴上的内容居中对齐
		align-items: center; //垂直居中
		flex-direction: column; //垂直排列
		flex: 1; //宽度充满全屏
		overflow: hidden; //超出部分隐藏

		.load-box {
			display: flex;
			width: 90%;
			height: 300px;
			flex-direction: column; //主轴上的内容列方向排布

			//justify-content: space-between; //平均分布
			.load-text {
				line-height: 40px; //行高
				font-size: 25px;
			}

			.load-choose {
				display: flex;
				justify-content: center;
				height: 50px;
				align-items: center; //垂直居中

				.load-choosein {
					display: flex;
					line-height: 50px;
					width: 70%;
					justify-content: space-between;
					align-items: center; //垂直居中
				}
			}

			.load-mmclass {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 96px;

				.load-input {
					display: flex;
					border: 1px solid #cccccc;
					height: 40px;
					align-items: center; //交叉轴方向的居中对齐
					padding-left: 10px;
				}
			}

			.load-yzmclass {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 96px;

				.load-input {
					display: flex;
					border: 1px solid #cccccc;
					height: 40px;
					align-items: center; //交叉轴方向的居中对齐
					padding-left: 10px;

					.yzm-btn-input {
						width: 65%;
					}

					.yzm-btn {
						font-size: 14px;
						color: #007AFF;
						background-color: Transparent;
						border: none; //无边框
						outline: none; //获得焦点也无边框
					}
				}
			}

			.load-button {
				padding-top: 10px;
			}
		}
	}

	.vcodeinput {
		width: 80%;
	}

	.vcodeimg {
		width: 88px;
		height: 32px;
	}

	.load-place {
		//padding-left: 10px; //使字与左边空有一定距离
		font-size: 15px;
	}
</style>
